<script setup>
import topNav from "../../components/topNav.vue";
import { introApi } from "@/services/index";
import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";
import { nextTick, ref, watch, onMounted } from "vue";
import { appInfo, loginSwitch } from "@/services/user";
// import topNav from "../../components/topNav.vue";
import { operation } from "@/utils/num.js";
import {
  appScTransferReturnQueryList,
  appShopSelector,
} from "@/services/transfer";

const selectType = ref(1);
const topHeight = ref(uni.getStorageSync("topHight") || 0);
const isTime = ref(false);
const isType = ref(false);
const keyword = ref("");
const form = ref({
  categoryId: "",
  pageIndex: 1,
  pageSize: 20,
  barCode: "",
  code: "",
  name: "",
  skuCode: "",
  categoryId: "",
  available: "",
  keyword: "",
});
const userObj = ref({});
const options1 = ref([]);
const options2 = ref([]);
const openDropdown = ref(false);

onLoad((options) => {
  getAppProductQuery();
  if (uni.getStorageSync("user")) {
    userObj.value = JSON.parse(uni.getStorageSync("user"));
  }
  options1.value = [userObj.value];
  getAppShopSelector();
});

// 门店选择
const getAppShopSelector = async () => {
  let res = await appShopSelector({});
  options2.value = res.data.datas;
};

const productData = ref([]);

const loading = ref("");
const getAppProductQuery = async (index) => {
  if (index == 1) {
    productData.value = [];
    loading.value = "";
  }
  if (index) {
    form.value.pageIndex = index;
  }
  if (loading.value == "noMore") {
    return;
  }
  loading.value = "Loading";
  try {
    let res = await appScTransferReturnQueryList(form.value);
    if (res.code == 200) {
      productData.value = productData.value.concat(res.data.datas);
      console.log(productData.value);
      form.value.pageIndex = form.value.pageIndex + 1;

      if (res.data.datas.length < form.value.pageSize) {
        loading.value = "noMore";
      } else {
        loading.value = "More";
      }
    } else {
    }

    console.log(res);
  } catch (e) {}
};
const searchFun = () => {
  getAppProductQuery(1);
};
const select_one = ref("");
const select_two = ref("");
const select_three = ref("");
const select_from = ref("");

const uDropdownRef = ref(null);
function clerselect() {
  select_one.value = "";
  select_two.value = "";
  select_three.value = "";
  select_from.value = "";
}
const closeDropdown = () => {
  uDropdownRef.value.close();
};

const onSelectOne = (item) => {
  clerselect();
  uDropdownRef.value.close();
  select_one.value = item.shopId;
};
const onSelectTwo = (item) => {
  clerselect();
  uDropdownRef.value.close();
  select_two.value = item.id;
  console.log(select_two.value);
};

const onSelectForm = (item) => {
  clerselect();
  uDropdownRef.value.close();
  select_from.value = item.value;
  form.value.status = item.value;
  getAppProductQuery(1);
};

const onDetail = (item) => {
  console.log(item);
  uni.navigateTo({
    url: "/pages/transfer/record_det/index?id=" + item.id,
  });
};
const isshowpr = ref(false);
const openfun = () => {
  if (isshowpr.value) {
    return;
  }
  if (openDropdown.value == false) {
    openDropdown.value = true;
  }
};
const closefun = () => {
  if (isshowpr.value) {
    return;
  }
  isshowpr.value = true;
  openDropdown.value = false;
  isshowpr.value = false;
};
onReachBottom(() => {
  getAppProductQuery();
});
//无网状态
const connected = () => {
  getAppProductQuery();

  getAppShopSelector();
};
</script>

<template>
  <view class="bg">
    <topNav
      :title="'调货退货记录'"
      @save="saveFun"
      :border="true"
      rType="save"
    ></topNav>
    <view
      class="top"
      style="padding-bottom: 20rpx"
      :class="!openDropdown ? 'top-open' : ''"
      :style="'top: calc( 88rpx + ' + topHeight + 'px);'"
    >
      <view class="search-k">
        <up-search
          placeholder="单据编号/操作人"
          v-model="form.keyword"
          :showAction="false"
          @search="searchFun"
        ></up-search>
      </view>
      <!-- <view class="select-list">
        <up-dropdown ref="uDropdownRef" @open="openfun()" @close="closefun()">
          
          <up-dropdown-item title="调入">
            <view class="slot-content" style="background-color: #ffffff">
              <scroll-view scroll-y="true" class="scroll-view">
                <view
                  class="index-item"
                  :class="item.shopId == select_one ? 'active' : ''"
                  v-for="(item, index) in options1"
                  :key="index"
                  @click="onSelectOne(item)"
                >
                  {{ item.shopName }}</view
                >
              </scroll-view>
            </view>
          </up-dropdown-item>
          <up-dropdown-item title="调出">
            <view class="slot-content" style="background-color: #ffffff">
              <scroll-view scroll-y="true" class="scroll-view">
                <view
                  @click="onSelectTwo(item)"
                  class="index-item"
                  v-for="(item, index) in options2"
                  :key="index"
                  :class="item.id == select_two ? 'active' : ''"
                >
                  {{ item.name }}</view
                >
              </scroll-view>
            </view></up-dropdown-item
          >
          <up-dropdown-item v-model="value2" title="时间"></up-dropdown-item>
          <up-dropdown-item
            v-model="value2"
            title="状态"
            :options="options2"
          ></up-dropdown-item>
        </up-dropdown>
      </view> -->
    </view>

    <view class="content">
      <!-- @click="onDetail(item)" -->
      <view
        class="content-item"
        v-for="(item, index) in productData"
        :key="index"
      >
        <view class="content-title"
          ><text>单据编号：{{ item.id }}</text
          ><text
            :class="
              item.status == 3
                ? 'orange'
                : item.status == 6
                ? 'info'
                : item.status == 12
                ? 'green'
                : ''
            "
            >{{ item.statusText }}</text
          ></view
        >
        <!-- <view
          class="content-goods"
          v-for="(item2, index2) in item.goodsList"
          :key="index2"
        >
          <view class="content-goods-left"
            ><image :src="item2.image" mode="scaleToFill"
          /></view>
          <view class="content-goods-right">
            <view class="content-goods-right-title">
              <text>{{ item2.name }}</text>
            </view>
            <view class="content-goods-right-index">
              <view>
                <view class="content-goods-right-num">
                  <view class="content-goods-right-num-left"
                    ><text>{{ item2.categoryName }}</text>
                  </view>
                </view>
               
                <view class="content-goods-right-price"
                  ><text>¥</text> {{ item2.taxPrice }}</view
                ></view
              >
            </view>
          </view>
        </view> -->

        <view class="content-info">
          <view class="content-info-left">
            <!-- <view class="content-info-left-item">
              <view class="one"></view>
              <view class="line"></view>
              <view class="two"></view>
            </view> -->
            <view class="content-info-sm">
              <!-- <view
                ><text>{{ "退款人" }} · {{ item.approveBy }}</text>
              </view> -->
              <view class="two"
                ><text
                  >{{ item.targetShop }} ·
                  {{ item.approveBy ? item.approveBy : "-" }}</text
                ></view
              >
            </view>
          </view>
          <!-- <view class="content-info-right">
            <view class="content-info-right-item">¥{{ item.totalAmount }}</view>
            <view class="content-info-right-text">{{ item.totalNum }}件</view>
          </view> -->
        </view>
        <view class="content-time"
          ><text>退款时间：{{ item.createTime }}</text>
          <text class="red"
            >退{{ item.totalNum }}件,￥{{
              item.totalAmount ? "￥" + item.totalAmount : item.totalAmount
            }}</text
          ></view
        >
      </view>

      <view
        class="noData"
        v-if="productData.length <= 0 && loading == 'noMore'"
      >
        <view class="noData-img">
          <image src="@/static/nodate/datas.png" mode="scaleToFill" />
          <view>暂无数据 </view>
        </view>
      </view>
      <view class="loading-form" v-if="loading && productData.length > 0"
        ><van-loading size="24rpx" v-if="loading == 'Loading'"
          ><text class="loading-text">加载中...</text>
        </van-loading>
        <text class="loading-text" v-if="loading == 'More'">加载更多</text>
        <text class="loading-text" v-if="loading == 'noMore'"
          >~没有数据了~</text
        >
      </view>
    </view>
  </view>
  <noWork @connected="connected"> </noWork>
</template>

<style lang="scss" scoped>
@import "index.scss";
</style>
